ペット追跡アプリケーションを作成するワークショップに再挑戦しました #reinvent #FWM306

こんにちは、Classmethod Canada の SHIO です。

以前、re:Invent2022にて AWS Location Service を使用した ペット追跡アプリケーション を作成するワークショップについてのブログを書きました。

現地ではワークショップ時間内に何とか全てのステップを終えることはできたものの、いくつかうまくいかない箇所がありました。原因も分からないまま終わってしまったため、今回再挑戦ということで再度ワークショップに挑んでみました。

ワークショップ 再挑戦！

前回、最後のステップでペットとの距離を確認する際に位置の追跡が出来ませんでした。
位置情報がオフになっている可能性を考え事前に確認をします。ブラウザ(Chrome)の設定では オン になっていましたが、PCの方(Mac)を確認したところ オフ になっていました。
『Enable Location Services』にチェックをしさらに Chrome にもチェックを入れておきます。

それではワークショップ開始です！

ペット追跡アプリケーションのアークテクチャは以下となります。

前提条件(必要なリソースと環境のセットアップ)

re:Inventでワークショップを行ったときは、必要なリソースと環境・IAMポリシーがすでに設定されたAWSアカウントが用意されていましたが、今回は自分のAWSアカウントを使用するので事前に各種設定が必要となります。

Cloud9 環境のデプロイ

ワークショップドキュメントによると、リージョンは us-east-1 か eu-west-1 を使用するように書いてありますので、どちらかを選びます。

Cloud9 コンソールの 環境の作成 からインスタンスタイプを「m5.large」に設定し作成をします。

環境が起動されたら Open をクリックし接続をします。

次に、ワークショップに必要なリソースなどを設定していきますが github に全て用意されているので、インストラクションに従いダウンロード＆スクリプトを実行していきます。

1. はじめに

まずはフロントエンドアプリケーションを起動する必要があるため、以下コマンドを実行しアプリケーションを起動します。

npm run frontend:start

実行中のアプリケーションをプレビューすると、「Hello World!」が表示されます。

2. マップのレンダリング

Amazon Location Service で Maps を作成します。
Maps -> Create map

Map Style では HERE Explore を選択します。これを選択することによって、ニュートラルな世界地図が表示されます。

次に、マップをアプリに追加します。Cloud9 で App.jsx を開いて内容を変更していきます。

ここで表示させるマップの緯度と経度を追加するのですが、今回はラスベガスではなくてバンクーバーの緯度と経度で設定していきます。

バンクーバーオフィスの緯度と経度で設定しました！

ユーザが マップ を ズームイン/アウト できるようにするために コントローラー を追加します。

できました！

3. ペットシミュレーター

IoTペットシミュレーターは経度と緯度を受け取り、位置の更新をAWSのバックエンドに送信するスクリプトです。各ステップで、ペットを前の位置から数メートル移動させてペットが歩き回るようにシミュレートします。

シミュレーションを開始する前に、pet_simulator/index.ts にて 緯度と経度 を変更します。
ここを変更しないと 自分とペットとの距離を確認する という最終ステップで、自分はバンクーバーにいるのにペットがラスベガスにいるという状況になってしまうためです。

以下を変更します。

const LNG = -115.17077150978058;
const LAT = 36.12309017212961;

↓

const LNG = -123.11975900383517;
const LAT = 49.286380243535206;

変更したら、ペットのシミュレーションを開始するために以下コマンドを実行します。

npm run sim:start

すると、以下のような Failed のメッセージが出力されるのですが

Failed to connect: aws-c-io: AWS_IO_DNS_INVALID_NAME, Host name was invalid for dns resolution.

あわてずしばらく待っていると IoT Core への接続が成功し、下記メッセージが出力されますのでこれでOKです。

{
    "id": "pettracker",
    "timestamp": "2023-01-03T00:13:10.541Z",
    "lng": -123.11975900383517,
    "lat": 49.286380243535206
  }

＊ 前回のブログ で、IoT Coreに接続できない(涙) と書いていたのですがこのステップを何回か試してみた結果、ただ接続までに時間がかかってるだけで待てば良かったということが分かりました....学びです。

4. IoT Core モノ ＆ ルール

バックエンドへのロケーション更新を開始したので、AWS IoT Coreで更新を受信、ルーティングおよび処理します。

MQTT test client から確認をします。

ペットシミュレーターが出力していた内容をこちらからでも確認できました！
次に、実際のIoTデバイスを確認します。モノ に pettracker が追加されています。

モノ に証明書が設定されていますが、こちらはペットシミュレーターが IoT Core に接続するために使用されているものです。
＊ワークショップ最後の クリーンアップ の箇所には書かれていないのですが、この証明書は手動で 無効化 -> 削除 する必要がありますので注意してください。(CloudFormationの削除でエラーが出てしまいます。)

5. ペットの追跡

ペットの追跡を行うには、Amazon Location Service で トラッカー を作成します。トラッカーを使用することによってデバイスの現在の場所 または 場所の履歴をクエリすることができます。

AWS Location Service コンソールの Trackers から Create tracker を実施してこのステップは終わりです。

6. ペットの位置を地図上に表示する

このステップでは、ペットの位置を地図上に表示させます。
App.jsx に TrackerControl をインポートします。TrackerControl は、AppSync からの位置更新をサブスクライブし新しい位置を受信するたびにマップにマーカーを配置するカスタムコントロールです。

App.jsx で TrackerControl をインポートするようにコードを書きます。

Start Tracking ボタンが表示されました！

ボタンを押してみると...

ペットの位置が表示されました！

7. ジオフェンスを追加する

ペットが遠くに離れてしまった時、または危険と見なされる地域に入った時に通知を送信するように ジオフェンス を追加します。

AWS Location Servece -> Geofence collections を選択し Create

この時、"CloudWatchをターゲットとするEventBridgeルール" も一緒に作成します。

次に App.jsx に GeofencesControl を追加します。

Geofences のボタンが追加されました！

マップ上で ジオフェンス を追加してみます。
Geofences ボタンをクリックして、マップの追加したい場所で シングルクリック します。

ジオフェンスが定義されたエリアができました！
コンソール上でも先ほどマップから追加した ジオフェンス が追加されていることを確認できます。

8. ペットがいなくなったら通知を受け取る

このステップでは、ペットが特定のエリアに出入りしたときに通知を受け取る方法を設定します。
先ほど追加した ジオフェンス に トラッカー をリンクします。

AWS Location Service -> Trackers -> 対象トラッカーを選択 -> Link Geofence Collection

イベントのログがCloudWatchに送信されているはずなのでそちらを確認します。re:InventでのワークショップではこのステップでCloudWatchにログが送信されず(空っぽ)、結局何故送信されていないか分からずじまいだったのですが今回は果たして...！とドキドキしながら確認したら、

無事送信されていました！！！

詳細も確認してみます。

想定通りにログが出力されていました！！こちらはペットがジオフェンスのひとつを超えた場合のログとなります。

今回はうまくいって良かったです。

9. ペットとの距離を確認する

最後のセクションです。
このステップではペットとの距離を確認します。

ペットとの距離を計算するために、Location Service で Route Calculator を作成します。

AWS Location Service -> Route Calculators -> Create route calculator

コンソール側の設定が完了したら次はアプリケーションの更新です。App.jsx に DistanceControl コンポーネントをインポート＆追加します。

自分とペットの間の距離を表示するためのボタンが追加されました！しかしグレーアウトしています。
このままだとこの機能を使えないので、まずは全画面表示にします。

ボタンが押せるようになりました！ブラウザが現在の位置情報の利用について確認してくるので許可します。re:Inventでのワークショップではこれが出てこなかったのでやっぱり位置情報がオフになってたのですね。。。

位置情報を許可してから数秒後、ペットの位置が表示されました。

Distance の箇所を確認すると、自分とペットとの距離が 0.02km であることが分かります。

成功です！
以上で全てのステップが完了しました！

リソースのクリーンアップ

最後にリソースを削除します。
ワークショップドキュメントに書かれているステップを実施しても全て消せない＆CloudFormationのStack削除が失敗するので以下にメモします。

• IoTの証明書は手動で無効化からの削除
• S3バケットは事前に手動で消す
• Secret Managerでシークレットを手動で削除する

おわりに

今回はエラーもなく最後までやり終えることができてホッとしております...再挑戦、成功して良かったです。
実は再挑戦も何度かやり直しており(re:Inventでのワークショップ中では発生しなかった問題に直面しておりました)、何度もやり直しをしたおかげでより理解を深めることができたと思っています。

次回はまた別のワークショップに挑戦する予定です！

レポートは以上となります。
ここまで読んで頂きありがとうございました！